<template>
	<div class="warp">
		<div class="bg content">
			<div class="logo">
				<img src="../../../images/logo_03.png" alt="">
			</div>
			<div class="top_title">
				<img :src="htitleUrl" alt="">
			</div>
			<div class="pika_logo">
				<img src="../../../images/pikaqiu_logo_03.png" alt="">
			</div>
			<!-- 中间的相框 -->
			<form action="http://localhost:3000/upload" enctype="multipart/form-data" method="post" onsubmit="return false">
				<photoFrame>
					<!-- <roundFrame></roundFrame> -->
					<div class="round">
						<div class="photo" ref="photos">
							
						</div>
					</div>
				</photoFrame>
				<!-- 按钮 -->
				<div class="btn-cont" v-if="flag">
					<div class="btn_upload">
						<input type="file" 
						name="avator" id='uploadfile' value="上传照片" 
						ref="input" 
						@change="myAjax()"
						style="display: none;"
						/>
						<span @click="posted">上传照片</span>
						
					</div>
					<p>上传本人照片，获得新年桃花指数！</p>
				</div>
				<div class="p_txt">
					<p>{{slo}}</p>
				</div>
			</form>

		</div>

	</div>
</template>

<script>
	// import bg from "@/components/home/bg.vue"
	// import "../../scss/_until.scss"
	import photoFrame from "@/components/home/photoFrame.vue";
	// import roundFrame from "@/components/home/roundFrame.vue"
	// import axios from "axios";
	// import Qs from 'qs'
	import $ from "../../js/jquery.js"
	export default {
		props:{
			// imgUrl:String,
			// Age:Number,
			// Gender:String,
			// Beauty:String
		},
		data() {
			return {
				imgUrl: "",
				flag:true,
				timer: null,
				Age:Number,
				Gender:"",
				Beauty:"",
				slo:""
			}
		},
		created() {
			// this.getParams()
			// 1.获取地址栏上的type的参数
			const type = this.$route.query.type;
			// 2.将type值，设置 到仓库中
			this.$store.commit('set_type',type || "1");
		},
		computed:{
			type(){
				return this.$store.state.type;
			},
			htitleUrl(){
				return this.$store.state.htitleUrl;
			}
		},
		mounted() {
			this.ishow();
			// console.log(this.imgUrl)
			this.myAjax()
			// posted(){
			// 	this.myAjax()
			// }
			// var photos = document.querySelector('.photo')
			// let that = this
			// photos.addEventListener("change", function(e) {

			// 	// 获取用户上传的图片
			// 	// return
			// 	console.log(e.target.files[0])
			// 	// 使用h5的formdata对象进行ajax请求
			// 	var formdata = new FormData();
			// 	formdata.append('avator', e.target.files[0]);
			// 	that.$axios("http://localhost:3000/upload", {
			// 			headers: {
			// 				'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
			// 			},
			// 			method: "post",
			// 			dataType: "json", //服务器返回json格式数据
			// 			data: formdata,
			// 		})
			// 		.then(res => {
			// 			console.log(res)
			// 			// res = Qs.stringify(res)
			// 			that.imgUrl = res.data.data.url;
			// 			// let imgUrls = JSON.stringify(`<img style="width:100%;height:100%;" src=${this.imgUrl}/>`)
			// 			// console.log(imgUrls)
			// 			// let imgs = `<img style="width:100%;height:100%;" src=${this.imgUrl}/>`;
			// 			this.flag = true
			// 			photos.append(`<img style="width:100%;height:100%;" src=${that.imgUrl}/>`);
			// 		})
			// })

		},
		methods: {
			ishow() {
				// this.$refs.photos.style.height = 280+'px'
			},
			posted(){
				console.log('1')
				this.$refs.input.click()
			},
			myAjax() {
				let that = this
				$("#uploadfile").on("change", function(e) {
					// 获取用户上传的图片
					// return
					that.slo = "智能解析中..."
					that.flag = false
					// console.log(e.target.files[0])
					// 使用h5的formdata对象进行ajax请求
					var formdata = new FormData();
					// 前端读取文件
					var file = new FileReader();
					file.onload = function(){
						// console.log(file.result)
						formdata.append('avator', file.result);
						that.imgUrl = file.result
						$(".photo").append(`<img style="width:98%;height:98%;" src=${that.imgUrl} />`)
						$.ajax({
							// url: "http://localhost:3000/upload",
							url: "https://service-gwmev36w-1251395798.gz.apigw.tencentcs.com/release/detect_face",
							dataType: 'json', //服务器返回json格式数据
							data: formdata,
							processData: false,
							contentType: false,
							method: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							
							success: function(res) {
								// console.log(res)
								// that.imgUrl = "data:image/jpg;base64,"+res.data.url || "data:image/png;base64,"+res.data.url
								
								that.Age = res.age
								that.Gender = res.gender
								that.Beauty = res.beauty
								// this.flag = true
								
							},
							error:function(){
								alert("数据请求失败")
							}
						});
					}
					
					// 
					file.readAsDataURL(e.target.files[0]);
					// let that = this
					console.log(that.imgUrl)
					that.timer = setTimeout(() => {
						// console.log(that.Age)
						that.$router.push({
							path: "./thirdTest",
							name: "thirdTest",
							params: {
								Age:that.Age,
								Gender:that.Gender,
								Beauty:that.Beauty,
								imgUrl:that.imgUrl
							},
						})
					}, 6000)
				})
			
			}
		},
		components: {
			photoFrame,
			// roundFrame
		}
	}
</script>

<style lang="scss">
	@function px2vw($px) {
		@return $px * 100/750 * 1vw;
	}

	.bg {
		width: 100vw;
		height: 100vh;
		background: url("../../../images/bg.jpg") center no-repeat;
		// background-origin: ;
		position: fixed;
		background-size: cover;

	}
// https://www.runoob.com/w3cnote/js-random.html
	.wrap {
		width: 100vw;
		height: 100vh;
	}

	.warp .logo {
		z-index: 1;
		margin-top: px2vw(140);
		margin-left: 22px;
		height: 49px;
		width: 121px;

		img {
			display: block;
			width: 100%;
		}
	}

	.top_title {
		margin-left: auto;
		margin-right: auto;
		width: px2vw(691);
		height: px2vw(357);
		position: relative;

		img {
			display: block;
			width: 100%;
		}
	}

	.pika_logo {
		width: px2vw(208);
		height: px2vw(179);
		position: absolute;
		left: 0;
		top: 54vw;
		z-index: 111;

		img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}


	.round {
		width: px2vw(602);
		height: px2vw(602);
		margin-left: auto;
		margin-right: auto;
		margin-top: px2vw(-140);
		background: url('../../../images/xiangkuang.png') no-repeat;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.photo {
		width: px2vw(338);
		height: px2vw(338);
		background: url(../../../images/photo_img_03.jpg) no-repeat;
		background-size: cover;
		position: relative;
		overflow: hidden;
		// text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;

		img {
			display: block;
			width: 99%;
			height: 99%;
		}
	}


	.btn-cont {
		position: absolute;
		left: 50%;
		right: 50%;
		margin-left: -50%;
		margin-right: -50%;
		text-align: center;
	}

	.btn_upload {
		width: px2vw(458);
		height: px2vw(84);
		background-color: #fede6e;
		text-align: center;
		line-height: px2vw(84);
		font-size: 0.5rem;
		border-radius: px2vw(42);
		margin-left: auto;
		margin-right: auto;
		margin-top: px2vw(-40);

		// z-index: 111;
		span {
			font-size: 0.5rem;
			color: #ae037c;
			line-height: px2vw(84);
			// padding
		}
	}

	.btn-cont p {
		font-size: 0.3333rem;
		color: #fff;
		padding-top: px2vw(20);
	}
	
	.p_txt {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		margin-top: px2vw(10);
		p {
			font-size: 0.4rem;
			color: #fff;
		}
	}
</style>
